<template>
	<view style="padding: 24rpx 32rpx 40rpx 32rpx">
		<!-- <view class="recent">
			<text>最近录入</text>
			<view class="scrollX">
				<view @click="showIndex=index" :class="showIndex===index?'isActive':''" class="recent_item" v-for="(item,index) in recentList" :key="index">
					<text>车架号</text>
					<text>{{item}}</text>
				</view>
				<view @click="showIndex=-1" :class="showIndex===-1?'isActive':''" class="recent_item">
					<u-icon name="plus" color="#303030"></u-icon>
					<text>添加质保</text>
				</view>
			</view>
		</view> -->
		<form @submit="formSubmit">
			<view class="blocks">
				<text class="block_title">授权区域：</text>
				<view class="block_input">
					<view>授权经销商：</view>
					<input type="text" name="auth_store" value="" placeholder="请输入授权经销商"/>
				</view>
				<view class="block_input">
					<view>产品型号：</view>
					<input type="text" name="product_type" value="" placeholder="请输入产品型号"/>
				</view>
				<view class="block_input">
					<view>产品编号：</view>
					<input type="text" name="product_id" :value="productNum" placeholder="请输入点击右侧扫一扫"/>
					<u-icon @click="scanBar(1)" style="z-index:90;position: absolute;right: 50rpx;margin-top: -65rpx;" name="scan" color="#000000" size="42"></u-icon>
				</view>
				<view class="block_input">
					<view>质保年限：</view>
					<input type="number" name="quality_year" value="" placeholder="请输入质保年限"/>
				</view>
			</view>
			
			<view class="blocks">
				<text class="block_title">车主信息：</text>
				<view class="block_input">
					<view>车主姓名：</view>
					<input type="text" name="car_user_name" value="" placeholder="请输入车主姓名"/>
				</view>
				<view class="block_input">
					<view>车主手机号码：</view>
					<input type="tel" name="car_user_mobile" value="" placeholder="请输入车主手机号码"/>
				</view>
			</view>
			
			<view class="blocks">
				<text class="block_title">车辆信息：</text>
				<view class="block_input">
					<view>品牌车辆：</view>
					<input type="text" name="car_type" value="" placeholder="请输入品牌车辆"/>
				</view>
				<view class="block_input">
					<view>车牌号：</view>
					<input type="text" name="car_id" value="" placeholder="请输入车牌号"/>
				</view>
				<view class="block_input">
					<view>车架号：</view>
					<input type="text" name="car_case_id" :value="carNum" placeholder="请输入车架号"/>
					<u-icon @click="scanBar(2)" style="z-index:90;position: absolute;right: 50rpx;margin-top: -65rpx;" name="scan" color="#000000" size="42"></u-icon>
				</view>
				<view class="block_input">
					<view>车身颜色：</view>
					<input type="text" name="car_color" value="" placeholder="请输入车身颜色"/>
				</view>
			</view>
			
			<view class="blocks">
				<text class="block_title">施工信息：</text>
				<view class="block_input">
					<view>施工店名：</view>
					<input type="text" name="build_shop_name" value="" placeholder="请输入施工店名"/>
				</view>
				<view class="block_input">
					<view>联系方式：</view>
					<input type="tel" name="build_shop_phone" value="" placeholder="请输入联系方式"/>
				</view>
			</view>
			
			<view class="blocks">
				<text class="block_title">施工项目：</text>
				<view class="block_input">
					<checkbox-group class="padding-xs block checkbox_group" @change="checkboxChange">
						<label class="margin-xs" v-for="(item,index) in checkbox" :key="item.value">
							<checkbox class="margin-xs" :class="checkbox[index].checked?'checked.yellow':''" :value="item.value" :checked="checkbox[index].checked?true:false"></checkbox>{{item.name}}
						</label>
					</checkbox-group>
				</view>
				<view class="block_input">
					<view>施工日期：</view>
					<view>
						<input style="padding-left: 80rpx;" :value="startDate" type="date" @click="showPickerStart=true" name="build_start_time" placeholder="点击选择日期">
						<u-icon style="position: absolute;left: 50rpx;margin-top: -67rpx;" name="calendar" color="#BCBCBC" size="42"></u-icon>
						<u-picker @confirm="confirmStartDate" v-model="showPickerStart" mode="time"></u-picker>
					</view>
				</view>
				<view class="block_input">
					<view>施工价格：</view>
					<input type="number" name="build_price" placeholder="元">
				</view>
				<view class="block_input">
					<view>结束日期：</view>
					<view>
						<input style="padding-left: 80rpx;" :value="endDate" type="date" @click="showPickerEnd=true" name="build_end_time" placeholder="点击选择日期">
						<u-icon style="position: absolute;left: 50rpx;margin-top: -67rpx;" name="calendar" color="#BCBCBC" size="42"></u-icon>
						<u-picker  @confirm="confirmEndDate" v-model="showPickerEnd" mode="time"></u-picker>
					</view>
				</view>
				<view class="block_input">
					<view>备注：</view>
					<input name="content" type="text" placeholder="备注内容">
				</view>
			</view>
			<button class="submit" form-type="submit">提交</button>
		</form>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPickerStart: false,
				showPickerEnd: false,
				startDate:'',
				endDate:'',
				carNum:'',
				productNum:'',
				showIndex:-1,
				recentList:[123455,123455],
				checkbox: [{
						value: '1',
						name: '整车',
						// checked: 'true'
					},
					{
						value: '2',
						name: '前杠'
					},
					{
						value: '3',
						name: '后杠'
					},
					{
						value: '4',
						name: '机盖'
					},
					{
						value: '5',
						name: '右前叶子板'
					},
					{
						value: '6',
						name: '左前叶子板'
					},
					{
						value: '7',
						name: '右后叶子板'
					},
					{
						value: '8',
						name: '左后叶子板'
					},
					{
						value: '9',
						name: '右门组合'
					}, {
						value: '10',
						name: '左门组合'
					}, {
						value: '11',
						name: '前档'
					}, {
						value: '12',
						name: '后档'
					}, {
						value: '13',
						name: '左前'
					}, {
						value: '14',
						name: '左后'
					}, {
						value: '15',
						name: '右前'
					}, {
						value: '16',
						name: '右后'
					}, {
						value: '17',
						name: '天窗'
					}
				],
				isAll:false,
				currentChecks:{}
			}
		},
		methods: {

			checkboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
				if(values.includes("1")){
					this.isAll = !this.isAll;
					this.$set(items[0], 'checked', this.isAll);
				}
				this.currentChecks = {};
				for (var i = 1, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(!this.isAll){
						if (values.includes(item.value)) {
							this.$set(item, 'checked', true)
							this.currentChecks[item.value] = item.name;
						} else {
							this.$set(item, 'checked', false)
						}
					}else{
						this.$set(item, 'checked', false)
					}
				}
			},
			
			async formSubmit(e){
				let data = e.detail.value;
				data.build_items = JSON.stringify(this.currentChecks);
				if(Object.values(data).includes('')){
					this.$refs.uToast.show({type:'warning',title: "请完善信息!"});
					return;
				}else if((!(/^1[345789]\d{9}$/.test(data.car_user_mobile)))||(
				!(/^1[345789]\d{9}$/.test(data.build_shop_phone)))){
					this.$refs.uToast.show({type:'warning',title: "联系方式格式不正确!"});
					return;
				}
				let strData = JSON.stringify(data);
				let res = await this.$api.postTicket({data:data});
				if(res.code){
					this.$refs.uToast.show({type:'success',title: "录入成功!"});
					try {
						await this.$api.setMsg({phone:data.car_user_mobile});
					} catch(error) {	
						console.log(error);
					}
					setTimeout(function() {
						uni.navigateBack({
							delta:1
						})
					}, 1500);
				}
			},
			
			confirmStartDate(e){
				this.startDate = e.year+'-'+e.month+'-'+e.day;
			},
			
			confirmEndDate(e){
				this.endDate = e.year+'-'+e.month+'-'+e.day;
			},
			
			scanBar(index){
				//扫条形码识别
				let that = this;
				uni.scanCode({
					scanType: ['barCode'],
					success:async function(code){
						console.log(code);
						if(index===2)that.carNum = code.result;
						else that.productNum = code.result;
					},
					fail:()=>{
						this.$refs.uToast.show({type:'info',title: "已取消!"});
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.recent{
	display: flex;
	width: 100%;
	align-items: center;
	font-family: PingFang SC, PingFang SC;
	font-weight: bold;
	font-size: 32rpx;
	color: rgba(0,0,0,0.8);
	line-height: 40rpx;
	height: 108rpx;
	text{
		margin-right: 12rpx;
		white-space: nowrap;
	}
	.scrollX{
		display: flex;
		align-items: center;
		overflow-x: scroll;
		flex: 1;
		.recent_item{
			width: 252rpx;
			height: 64rpx;
			margin: 0 16rpx;
			border-radius: 896rpx 896rpx 896rpx 896rpx;
			background: #F1F1F1;
			padding: 14rpx 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 400;
			font-size: 26rpx;
			color: rgba(0,0,0,0.8);
		}
	}
}
.isActive{
	border: 2rpx solid #FBCB11;
	background-color: rgba(251,203,17,0.2) !important;
}
.blocks{
	margin-top: 30rpx;
	display: flex;
	flex-direction: column;
	.block_title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 36rpx;
		color: #000000;
		line-height: 40rpx;
		margin-bottom: 32rpx;
	}
	.block_input{
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-bottom: 32rpx;
		view{
			font-family: PingFang SC, PingFang SC;
			font-size: 32rpx;
			color: #000000;
			line-height: 40rpx;
			margin-bottom: 16rpx;
		}
		input{
			height: 92rpx;
			background: #F8F9FB;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			color: rgba(0,0,0,0.8);
			padding:0 24rpx;
			font-size: 32rpx;
		}
		.checkbox_group{
			display: flex;
			justify-content: space-evenly;
			flex-wrap: wrap;
		}
	}
}
.submit{
	width: 100%;
	background-color: #FBCB11;
	height: 80rpx;
	font-size: 28rpx;
	color: #020202;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	&::after{
		display: none;
	}
}
</style>
